// 添加的这些时间，鼠标点击这些元素上的时候，单独删除这个元素

// 定义事件处理流程
var oDiv = document.querySelector('.显示时间区域')
function eventHandle() {
    var now = new Date()
    // oDiv.innerHTML += `<div>${now}</div>`    // 这时候使用 innerHTML 的字符串处理方式就不方便了
    // 实际要为新添加的元素绑定事件
    // 我们使用对象视角
    var nowDiv = document.createElement('div')
    nowDiv.textContent = now

    // 为 nowDiv 绑定鼠标点击事件
    nowDiv.onclick = function() {
        // 将自己 nowDiv 从父元素 oDiv 删除
        oDiv.removeChild(nowDiv)
    }

    oDiv.appendChild(nowDiv)
}

// 查出事件源
var oButton = document.querySelector('button')

// 事件类型是点击（click）
// 为三者建立绑定关系
oButton.onclick = eventHandle